"use client"
import { useState } from 'react';
import { getTranslation } from '../../locales/translations';
import LanguageSwitcher from "../languageSwitcher";
import LogoSvgUrl from './assets/logo.svg';
import AppLogoSvgUrl from './assets/app-logo.svg';
import LogoImgUrl from './assets/logo.webp';
import { ChevronDown, ChevronRight } from "lucide-react"


const Footer = ({ lang = "en" }) => {
  const t = (key) => getTranslation(key, lang);
  const [expandedSections, setExpandedSections] = useState({
    product: false,
    appServices: false,
    aboutUs: false,
    downloadApp: false
  });

  // Set direction based on language
  const isRtl = lang === "ar"
  const dir = isRtl ? "rtl" : "ltr"

  const toggleSection = (section) => {
    setExpandedSections(prev => ({
      ...prev,
      [section]: !prev[section]
    }));
  };

  return (
    <footer className="bg-[#1e2427] text-white py-2 md:py-8" dir={dir}>
      <div className="container mx-auto px-4 max-w-5xl">
        <div className={`flex flex-col justify ${isRtl ? "md:flex-row-reverse" : ""}`}>
          {/* Navigation */}
          <div className={`flex-col space-x-0 md:space-x-4 flex md:flex-row md:justify-between w-full ${isRtl ? "md:text-right" : ""}`}>
            {/* Logo */}
            <div className={`w-full py-2 md:py-6 md:mb-0 hidden md:block ${isRtl && "ml-4"}`}>
              <img
                onClick={() => location.href = `/${lang}/`}
                src={LogoImgUrl}
                alt="Logo"
                className="h-4 !w-auto"
              />
            </div>

            {/* Product */}
            <div className="w-full md:border-none">
              <div
                className="flex justify-between items-center py-4 cursor-default"
                onClick={() => toggleSection('product')}
              >
                <h3 className="text md:text-lg font-medium">{t("footer.navigation.product")}</h3>
                <span className="md:hidden">{expandedSections.product ? <ChevronDown className='h-4' /> : <ChevronRight className='h-4' />}</span>
              </div>
              <ul className={`space-y-2 overflow-hidden transition-all duration-300 ${expandedSections.product ? 'max-h-96 mb-4' : 'max-h-0'} md:max-h-96`}>
                {["indoorCam", 'outdoorCam', 'simCam', 'doorbell', "dashCam", "petFeeder",'networkCamera'].map((categoryKey) => (
                  <li className="cursor-pointer" key={categoryKey} onClick={() => location.href = `/${lang}/products/${categoryKey}/`}>
                    <a className="text-gray-400 hover:text-white">
                      {t(`footer.productLinks.${categoryKey}`)}
                    </a>
                  </li>
                ))}
              </ul>
            </div>

            {/* App & Services */}
            <div className="w-full  md:border-none">
              <div
                className="flex justify-between items-center py-4 cursor-pointer md:cursor-default"
                onClick={() => toggleSection('appServices')}
              >
                <h3 className="text md:text-lg font-medium">{t("footer.navigation.appServices")}</h3>
                <span className="md:hidden">{expandedSections.appServices ? <ChevronDown className='h-4' /> : <ChevronRight className='h-4' />}</span>
              </div>
              <ul className={`space-y-2 overflow-hidden transition-all duration-300 ${expandedSections.appServices ? 'max-h-96 mb-4' : 'max-h-0'} md:max-h-96`}>
                <li>
                  <a href={`/${lang}/appAndServices/`} className="text-gray-400 hover:text-white">
                    {t("footer.appServicesLinks.app")}
                  </a>
                </li>
                <li>
                  <a href={`/${lang}/appAndServices/`} className="text-gray-400 hover:text-white">
                    {t("footer.appServicesLinks.services")}
                  </a>
                </li>
              </ul>
            </div>

            {/* About US */}
            <div className="w-full md:border-none">
              <div
                className="flex justify-between items-center py-4 cursor-pointer md:cursor-default"
                onClick={() => toggleSection('aboutUs')}
              >
                <h3 className="text md:text-lg font-medium">{t("footer.navigation.aboutUs")}</h3>
                <span className="md:hidden">{expandedSections.aboutUs ? <ChevronDown className='h-4' /> : <ChevronRight className='h-4' />}</span>
              </div>
              <ul className={`space-y-2 overflow-hidden transition-all duration-300 ${expandedSections.aboutUs ? 'max-h-96 mb-4' : 'max-h-0'} md:max-h-96`}>
                <li>
                  <a href={`/${lang}/aboutUs/`} className="text-gray-400 hover:text-white">
                    {t("footer.aboutLinks.aboutUs")}
                  </a>
                </li>
              </ul>
            </div>

            {/* Download App */}
            <div className="w-full md:border-none">
              <div
                className="flex justify-between items-center py-4 cursor-pointer md:cursor-default"
              >
                <h3 className="text md:text-lg font-medium">{t("footer.navigation.downloadApp")}</h3>
              </div>
              <div className={`overflow-hidden transition-all duration-300 max-h-96`}>
                <a onClick={() => window.open("https://webcamapp.cc/")} className="inline-block cursor-pointer">
                  <img
                    src={AppLogoSvgUrl}
                    alt="App Icon"
                    width={40}
                    height={40}
                    className="rounded-xl"
                  />
                </a>
              </div>
            </div>
          </div>
        </div>

        {/* Bottom Footer */}
        <div className="md:mt-12 md:pt-4 md:border-t border-gray-700">
          <div className={`flex flex-col md:flex-row ${isRtl ? "md:flex-row-reverse" : ""} justify-between md:items-center`}>
            <div className="mb-4 md:mb-0">
            </div>
            <div className={`flex text-xs md:text-sm ${isRtl ? "flex-row-reverse" : ""} space-x-4 items-center`}>
              <a onClick={() => window.open("https://api-cn01.tange365.com/app/protocol/cGtnbmFtZT1pY2FtMzY1Jmxhbmd1YWdlPWVuLXVz")} className="text-gray-400 hover:text-white">
                {t("footer.footer.privacyPolicy")}
              </a>
              <a onClick={() => window.open("https://api-cn01.tange365.com/app/protocol/cGtnbmFtZT1pY2FtMzY1Jmxhbmd1YWdlPWVuLXVz")} className="text-gray-400 hover:text-white">
                {t("footer.footer.termsOfService")}
              </a>
              <div className="mx-4 hidden md:block">
                <LanguageSwitcher currentLanguage={lang} position='bottom' />
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  )
}

export default Footer